<template>
  <view class="diet-container">
    <!-- 状态栏占位符 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部区域 -->
    <view class="header">
      <view class="header-back" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">饮食建议</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 宝宝信息提示 -->
    <view v-if="!hasBabyInfo" class="no-baby-info">
      <text class="info-text">请先添加宝宝信息以获取个性化饮食建议</text>
      <button class="add-baby-btn" @tap="navigateTo('/auntMom/pages/babyInfo/babyInfo')">添加宝宝信息</button>
    </view>
    
    <!-- 有宝宝信息时显示内容 -->
    <block v-else>
      <!-- 宝宝信息卡片 -->
      <view class="baby-card">
        <view class="baby-info">
          <image class="baby-avatar" :src="babyInfo.avatar || '/static/baby-avatar.png'" mode="aspectFill"></image>
          <view class="baby-detail">
            <view class="name-age">
              <text class="baby-name">{{ babyInfo.name }}</text>
              <text class="baby-age">{{ ageDescription }}</text>
            </view>
            <view class="month-tag">
              <text>{{ babyMonthAge }}个月</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 饮食阶段提示 -->
      <view class="diet-stage">
        <text class="stage-title">当前饮食阶段</text>
        <text class="stage-desc">{{ getDietStage() }}</text>
      </view>
      
      <!-- 饮食建议卡片 -->
      <view class="diet-card">
        <view class="card-header">
          <text class="card-title">推荐食物</text>
        </view>
        <view class="food-list">
          <view 
            class="food-item" 
            v-for="(food, index) in recommendedFoods" 
            :key="index"
          >
            <view class="food-icon" :style="{ backgroundColor: food.bgColor }">
              <text>{{ food.icon }}</text>
            </view>
            <view class="food-info">
              <text class="food-name">{{ food.name }}</text>
              <text class="food-desc">{{ food.description }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 注意事项 -->
      <view class="warning-card">
        <view class="card-header">
          <text class="card-title">饮食注意事项</text>
        </view>
        <view class="warning-list">
          <view 
            class="warning-item" 
            v-for="(warning, index) in dietWarnings" 
            :key="index"
          >
            <text class="warning-dot">•</text>
            <text class="warning-text">{{ warning }}</text>
          </view>
        </view>
      </view>
      
      <!-- 禁忌食物 -->
      <view class="forbidden-card">
        <view class="card-header">
          <text class="card-title">禁忌食物</text>
        </view>
        <view class="forbidden-list">
          <view 
            class="forbidden-item" 
            v-for="(food, index) in forbiddenFoods" 
            :key="index"
          >
            <view class="forbidden-icon">
              <text>⚠️</text>
            </view>
            <view class="forbidden-info">
              <text class="forbidden-name">{{ food.name }}</text>
              <text class="forbidden-reason">{{ food.reason }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 推荐食谱 -->
      <view class="recipe-card">
        <view class="card-header">
          <text class="card-title">推荐食谱</text>
        </view>
        <view class="recipe-list">
          <view 
            class="recipe-item" 
            v-for="(recipe, index) in recommendedRecipes" 
            :key="index"
            @tap="showRecipeDetail(recipe)"
          >
            <image class="recipe-image" :src="recipe.image || '/static/recipe-default.png'" mode="aspectFill"></image>
            <view class="recipe-info">
              <text class="recipe-name">{{ recipe.name }}</text>
              <text class="recipe-desc">{{ recipe.description }}</text>
              <view class="recipe-tags">
                <text 
                  class="recipe-tag" 
                  v-for="(tag, tagIndex) in recipe.tags" 
                  :key="tagIndex"
                >
                  {{ tag }}
                </text>
              </view>
            </view>
            <text class="recipe-arrow">→</text>
          </view>
        </view>
      </view>
    </block>
    
    <!-- 食谱详情弹窗 -->
    <view v-if="showRecipePopup" class="popup-mask" @tap="closePopup">
      <view class="popup-content" @tap.stop>
        <view class="popup-header">
          <text class="popup-title">食谱详情</text>
          <text class="popup-close" @tap="closePopup">×</text>
        </view>
        <view class="popup-body">
          <image 
            class="recipe-detail-image" 
            :src="currentRecipe.image || '/static/recipe-default.png'" 
            mode="aspectFill"
          ></image>
          <view class="recipe-detail-header">
            <text class="recipe-detail-name">{{ currentRecipe.name }}</text>
            <view class="recipe-detail-tags">
              <text 
                class="recipe-tag" 
                v-for="(tag, index) in currentRecipe.tags" 
                :key="index"
              >
                {{ tag }}
              </text>
            </view>
          </view>
          <view class="recipe-detail-desc">
            <text>{{ currentRecipe.description }}</text>
          </view>
          <view class="recipe-detail-section">
            <text class="section-title">食材</text>
            <view class="ingredients-list">
              <view 
                class="ingredient-item" 
                v-for="(ingredient, index) in currentRecipe.ingredients" 
                :key="index"
              >
                <text class="ingredient-name">{{ ingredient.name }}</text>
                <text class="ingredient-amount">{{ ingredient.amount }}</text>
              </view>
            </view>
          </view>
          <view class="recipe-detail-section">
            <text class="section-title">做法步骤</text>
            <view class="steps-list">
              <view 
                class="step-item" 
                v-for="(step, index) in currentRecipe.steps" 
                :key="index"
              >
                <view class="step-number">{{ index + 1 }}</view>
                <text class="step-desc">{{ step }}</text>
              </view>
            </view>
          </view>
          <view class="recipe-detail-section">
            <text class="section-title">营养价值</text>
            <text class="nutrition-text">{{ currentRecipe.nutrition }}</text>
          </view>
          <view class="recipe-detail-section">
            <text class="section-title">适宜月龄</text>
            <text class="age-text">{{ currentRecipe.suitableAge }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 获取状态栏高度
const statusBarHeight = ref(20);

// 是否有宝宝信息
const hasBabyInfo = ref(false);

// 宝宝信息
const babyInfo = ref({
  name: '',
  gender: '',
  dob: '',
  avatar: ''
});

// 宝宝月龄
const babyMonthAge = ref(0);

// 食谱弹窗控制
const showRecipePopup = ref(false);
const currentRecipe = ref({});

// 计算宝宝年龄描述
const ageDescription = computed(() => {
  if (!babyInfo.value.dob) return '';
  
  const birthDate = new Date(babyInfo.value.dob);
  const today = new Date();
  
  const yearDiff = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();
  const dayDiff = today.getDate() - birthDate.getDate();
  
  let years = yearDiff;
  let months = monthDiff;
  
  if (dayDiff < 0) {
    months--;
  }
  
  if (months < 0) {
    years--;
    months += 12;
  }
  
  if (years > 0) {
    return `${years}岁${months}个月`;
  } else {
    return `${months}个月`;
  }
});

// 获取饮食阶段
const getDietStage = () => {
  const age = babyMonthAge.value;
  
  if (age < 4) {
    return '母乳/配方奶阶段';
  } else if (age >= 4 && age < 6) {
    return '辅食初期阶段';
  } else if (age >= 6 && age < 9) {
    return '辅食中期阶段';
  } else if (age >= 9 && age < 12) {
    return '辅食后期阶段';
  } else if (age >= 12 && age < 24) {
    return '幼儿过渡期';
  } else {
    return '幼儿饮食期';
  }
};

// 推荐食物
const recommendedFoods = computed(() => {
  const age = babyMonthAge.value;
  
  if (age < 4) {
    return [
      {
        name: '母乳',
        description: '最理想的宝宝食物，含有丰富的营养和抗体',
        icon: '🍼',
        bgColor: '#e6f7ff'
      },
      {
        name: '配方奶',
        description: '如无法母乳喂养，选择适合月龄的配方奶',
        icon: '🥛',
        bgColor: '#f9f0ff'
      }
    ];
  } else if (age >= 4 && age < 6) {
    return [
      {
        name: '米粉',
        description: '选择铁强化的婴儿米粉，是宝宝的首选辅食',
        icon: '🍚',
        bgColor: '#fff7e6'
      },
      {
        name: '苹果泥',
        description: '富含果胶和纤维，帮助消化',
        icon: '🍎',
        bgColor: '#fff1f0'
      },
      {
        name: '胡萝卜泥',
        description: '富含维生素A，有助于视力发育',
        icon: '🥕',
        bgColor: '#fff2e8'
      }
    ];
  } else if (age >= 6 && age < 9) {
    return [
      {
        name: '蛋黄泥',
        description: '含有丰富的蛋白质和铁质，有助于大脑发育',
        icon: '🥚',
        bgColor: '#fffbe6'
      },
      {
        name: '南瓜泥',
        description: '富含纤维和胡萝卜素，促进消化',
        icon: '🎃',
        bgColor: '#fff7e6'
      },
      {
        name: '豆腐泥',
        description: '含有优质蛋白质和钙质，促进骨骼发育',
        icon: '🧊',
        bgColor: '#f0f5ff'
      },
      {
        name: '鱼泥',
        description: '富含DHA，有助于脑部和视力发育',
        icon: '🐟',
        bgColor: '#e6fffb'
      }
    ];
  } else if (age >= 9 && age < 12) {
    return [
      {
        name: '碎肉',
        description: '富含优质蛋白质和铁质，促进生长发育',
        icon: '🍖',
        bgColor: '#fff0f6'
      },
      {
        name: '西兰花',
        description: '富含维生素C和叶酸，促进免疫系统发育',
        icon: '🥦',
        bgColor: '#f6ffed'
      },
      {
        name: '燕麦片',
        description: '含有丰富的纤维和B族维生素',
        icon: '🥣',
        bgColor: '#fff7e6'
      },
      {
        name: '蛋羹',
        description: '质地软滑，富含蛋白质，易于消化吸收',
        icon: '🍮',
        bgColor: '#fffbe6'
      }
    ];
  } else {
    return [
      {
        name: '全谷物',
        description: '提供丰富的膳食纤维和B族维生素',
        icon: '🌾',
        bgColor: '#fff7e6'
      },
      {
        name: '酸奶',
        description: '富含钙质和益生菌，促进骨骼发育和肠道健康',
        icon: '🥛',
        bgColor: '#f0f5ff'
      },
      {
        name: '蔬菜水果',
        description: '提供多种维生素和矿物质',
        icon: '🥗',
        bgColor: '#f6ffed'
      },
      {
        name: '瘦肉',
        description: '优质蛋白质来源，补充铁质',
        icon: '🥩',
        bgColor: '#fff1f0'
      }
    ];
  }
});

// 饮食注意事项
const dietWarnings = computed(() => {
  const age = babyMonthAge.value;
  
  if (age < 4) {
    return [
      '0-6个月婴儿应以母乳或配方奶为唯一食物',
      '每次喂奶后注意给宝宝拍嗝',
      '根据宝宝饥饿信号按需喂养',
      '注意保持哺乳姿势正确，预防呛奶'
    ];
  } else if (age >= 4 && age < 6) {
    return [
      '辅食应从少量开始，逐渐增加',
      '每次只尝试一种新食物，观察2-3天是否有过敏反应',
      '辅食应制成泥状，避免宝宝噎食',
      '继续保持母乳或配方奶喂养',
      '食物需充分煮熟，不加盐和糖'
    ];
  } else if (age >= 6 && age < 12) {
    return [
      '逐渐增加食物种类和质地',
      '继续保持母乳或配方奶喂养',
      '食物应适当分小块，但仍需确保安全',
      '培养宝宝自主进食的兴趣',
      '避免高盐、高糖食品和蜂蜜',
      '注意食物过敏原的引入（如花生、鸡蛋）'
    ];
  } else {
    return [
      '提供多样化的食物，确保营养均衡',
      '鼓励宝宝自主进食，培养良好饮食习惯',
      '限制加工食品和含糖饮料',
      '控制零食，保持规律进餐时间',
      '继续注意可能的过敏反应',
      '小份多餐，避免强迫进食'
    ];
  }
});

// 禁忌食物
const forbiddenFoods = computed(() => {
  const age = babyMonthAge.value;
  
  let foods = [
    {
      name: '蜂蜜',
      reason: '可能含有肉毒杆菌，1岁以下婴儿禁用'
    },
    {
      name: '生肉、生蛋',
      reason: '可能含有细菌，导致食物中毒'
    },
    {
      name: '全脂牛奶',
      reason: '1岁以下不宜饮用，不易消化且营养不均衡'
    }
  ];
  
  if (age < 6) {
    foods = [
      ...foods,
      {
        name: '所有固体食物',
        reason: '4个月前消化系统未发育完善，仅需母乳或配方奶'
      }
    ];
  }
  
  if (age < 12) {
    foods = [
      ...foods,
      {
        name: '爆米花、坚果、果冻',
        reason: '容易导致窒息风险'
      },
      {
        name: '高盐、高糖食品',
        reason: '不利于肾脏发育和健康饮食习惯培养'
      }
    ];
  }
  
  return foods;
});

// 推荐食谱
const recommendedRecipes = computed(() => {
  const age = babyMonthAge.value;
  
  if (age < 4) {
    return [];
  } else if (age >= 4 && age < 6) {
    return [
      {
        id: 'r1',
        name: '苹果米糊',
        description: '适合初次尝试辅食的宝宝',
        tags: ['4个月+', '水果', '简单'],
        image: '/static/recipe-apple.png',
        ingredients: [
          { name: '婴儿米粉', amount: '1勺' },
          { name: '苹果', amount: '1/4个' },
          { name: '温水', amount: '适量' }
        ],
        steps: [
          '苹果去皮去核切小块',
          '将苹果蒸熟后压成泥',
          '加入适量温水调和成稀糊状',
          '加入米粉调匀即可'
        ],
        nutrition: '富含碳水化合物和维生素C，易于消化',
        suitableAge: '4-6个月'
      },
      {
        id: 'r2',
        name: '胡萝卜泥',
        description: '色彩鲜艳，富含维生素A',
        tags: ['4个月+', '蔬菜', '营养'],
        image: '/static/recipe-carrot.png',
        ingredients: [
          { name: '胡萝卜', amount: '1/2根' },
          { name: '水', amount: '适量' }
        ],
        steps: [
          '胡萝卜去皮切小块',
          '水煮或蒸煮至软烂',
          '捣碎或用搅拌机打成泥状',
          '可加入少量母乳或配方奶调节稠度'
        ],
        nutrition: '富含胡萝卜素，促进视力发育和免疫功能',
        suitableAge: '4-6个月'
      }
    ];
  } else if (age >= 6 && age < 9) {
    return [
      {
        id: 'r3',
        name: '南瓜蛋黄泥',
        description: '营养丰富，补铁佳品',
        tags: ['6个月+', '高铁', '营养'],
        image: '/static/recipe-pumpkin.png',
        ingredients: [
          { name: '南瓜', amount: '50克' },
          { name: '蛋黄', amount: '1/4个' },
          { name: '水', amount: '适量' }
        ],
        steps: [
          '南瓜去皮去籽切小块，蒸熟后碾成泥',
          '鸡蛋煮熟取出蛋黄，碾碎',
          '将南瓜泥和蛋黄混合',
          '加入少量水调节稠度'
        ],
        nutrition: '南瓜富含胡萝卜素，蛋黄富含铁质和卵磷脂，促进大脑发育',
        suitableAge: '6-9个月'
      },
      {
        id: 'r4',
        name: '鳕鱼豆腐泥',
        description: '优质蛋白质来源，质地细腻',
        tags: ['7个月+', '蛋白质', '鱼类'],
        image: '/static/recipe-fish.png',
        ingredients: [
          { name: '鳕鱼肉', amount: '30克' },
          { name: '嫩豆腐', amount: '30克' },
          { name: '胡萝卜', amount: '少量' },
          { name: '水', amount: '适量' }
        ],
        steps: [
          '鳕鱼肉去刺，蒸熟后用筷子碾碎',
          '豆腐切小块蒸熟',
          '胡萝卜切小丁蒸熟',
          '将所有材料混合，加少量水调匀成泥'
        ],
        nutrition: '鳕鱼富含DHA和优质蛋白质，豆腐含有钙质，促进脑部和骨骼发育',
        suitableAge: '7-9个月'
      }
    ];
  } else if (age >= 9 && age < 12) {
    return [
      {
        id: 'r5',
        name: '肉末蔬菜粥',
        description: '丰富的蛋白质和多种维生素',
        tags: ['9个月+', '肉类', '综合'],
        image: '/static/recipe-porridge.png',
        ingredients: [
          { name: '瘦肉末', amount: '30克' },
          { name: '大米', amount: '30克' },
          { name: '西兰花', amount: '20克' },
          { name: '胡萝卜', amount: '20克' },
          { name: '水', amount: '适量' }
        ],
        steps: [
          '大米洗净后加水煮成粥',
          '瘦肉末用少量水炒熟',
          '西兰花和胡萝卜切碎蒸熟',
          '将所有材料混合，继续煮3-5分钟'
        ],
        nutrition: '全面均衡的营养，提供蛋白质、铁质和多种维生素',
        suitableAge: '9-12个月'
      },
      {
        id: 'r6',
        name: '蒸蛋羹',
        description: '柔软细嫩，易于消化',
        tags: ['9个月+', '蛋类', '简单'],
        image: '/static/recipe-egg.png',
        ingredients: [
          { name: '鸡蛋', amount: '1个' },
          { name: '温水', amount: '3倍蛋液量' },
          { name: '西红柿', amount: '少量' },
          { name: '青豆', amount: '少量' }
        ],
        steps: [
          '鸡蛋打匀，加入温水搅拌均匀',
          '西红柿去皮切小丁，青豆煮熟',
          '将蔬菜放入蛋液中',
          '隔水小火蒸8-10分钟至凝固'
        ],
        nutrition: '蛋白质含量高，质地柔软，添加蔬菜增加维生素含量',
        suitableAge: '9-12个月'
      }
    ];
  } else {
    return [
      {
        id: 'r7',
        name: '彩色蔬菜面条',
        description: '色彩丰富，吸引宝宝食欲',
        tags: ['12个月+', '主食', '蔬菜'],
        image: '/static/recipe-noodle.png',
        ingredients: [
          { name: '细面条', amount: '50克' },
          { name: '胡萝卜', amount: '20克' },
          { name: '西兰花', amount: '20克' },
          { name: '玉米粒', amount: '20克' },
          { name: '瘦肉末', amount: '20克' }
        ],
        steps: [
          '面条煮熟捞出',
          '蔬菜切碎焯水',
          '肉末炒熟',
          '将面条、蔬菜和肉末混合拌匀'
        ],
        nutrition: '均衡的碳水化合物、蛋白质和多种维生素',
        suitableAge: '12个月以上'
      },
      {
        id: 'r8',
        name: '牛奶燕麦粥',
        description: '营养早餐，促进肠道健康',
        tags: ['12个月+', '谷物', '早餐'],
        image: '/static/recipe-oatmeal.png',
        ingredients: [
          { name: '即食燕麦片', amount: '30克' },
          { name: '牛奶', amount: '150毫升' },
          { name: '香蕉', amount: '1/2根' },
          { name: '蓝莓', amount: '少量' }
        ],
        steps: [
          '将牛奶加热至温热',
          '倒入燕麦片搅拌均匀',
          '香蕉切片',
          '将水果铺在燕麦粥上即可'
        ],
        nutrition: '富含膳食纤维、钙质和B族维生素，水果提供额外维生素和抗氧化物',
        suitableAge: '12个月以上'
      }
    ];
  }
});

// 导航函数
const navigateTo = (url) => {
  uni.navigateTo({
    url,
    fail: (err) => {
      console.error('导航失败:', err);
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      });
    }
  });
};

// 返回函数
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.navigateTo({
        url: '/auntMom/pages/home/home'
      });
    }
  });
};

// 计算宝宝月龄
const calculateMonthAge = (birthDateStr) => {
  if (!birthDateStr) return 0;
  
  const birthDate = new Date(birthDateStr);
  const today = new Date();
  
  return (today.getFullYear() - birthDate.getFullYear()) * 12 + today.getMonth() - birthDate.getMonth();
};

// 显示食谱详情
const showRecipeDetail = (recipe) => {
  currentRecipe.value = recipe;
  showRecipePopup.value = true;
};

// 关闭弹窗
const closePopup = () => {
  showRecipePopup.value = false;
};

// 页面加载
onMounted(() => {
  // 获取状态栏高度
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight;
    }
  });
  
  // 获取宝宝信息
  const storedBabyInfo = uni.getStorageSync('babyInfo');
  if (storedBabyInfo) {
    const parsedInfo = JSON.parse(storedBabyInfo);
    babyInfo.value = parsedInfo;
    hasBabyInfo.value = !!parsedInfo.name;
    
    // 计算宝宝月龄
    babyMonthAge.value = calculateMonthAge(parsedInfo.dob);
  }
});
</script>

<style lang="scss" scoped>
.diet-container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 40rpx;
}

.status-bar {
  width: 100%;
  background-color: #fa8c16;
}

.header {
  height: 100rpx;
  background-color: #fa8c16;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  position: relative;
  
  .header-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      color: #fff;
      font-size: 40rpx;
      font-weight: bold;
    }
  }
  
  .header-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
    flex: 1;
    text-align: center;
  }
  
  .header-right {
    width: 60rpx;
  }
}

.no-baby-info {
  margin: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .info-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .add-baby-btn {
    background-color: #fa8c16;
    color: #fff;
    font-size: 28rpx;
    width: 240rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 35rpx;
  }
}

.baby-card {
  margin: 30rpx 30rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .baby-info {
    display: flex;
    align-items: center;
    
    .baby-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      margin-right: 20rpx;
    }
    
    .baby-detail {
      flex: 1;
      
      .name-age {
        display: flex;
        align-items: baseline;
        margin-bottom: 8rpx;
        
        .baby-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-right: 10rpx;
        }
        
        .baby-age {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .month-tag {
        display: inline-block;
        font-size: 22rpx;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        background-color: #fff7e6;
        color: #fa8c16;
      }
    }
  }
}

.diet-stage {
  margin: 0 30rpx 20rpx;
  background-color: #fff7e6;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  border-left: 6rpx solid #fa8c16;
  
  .stage-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
  }
  
  .stage-desc {
    font-size: 26rpx;
    color: #fa8c16;
    font-weight: 500;
  }
}

.diet-card, .warning-card, .forbidden-card, .recipe-card {
  margin: 0 30rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    margin-bottom: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
    padding-bottom: 16rpx;
    
    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.food-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .food-item {
    width: calc(50% - 10rpx);
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
    
    .food-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      font-size: 36rpx;
    }
    
    .food-info {
      flex: 1;
      
      .food-name {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 6rpx;
        display: block;
      }
      
      .food-desc {
        font-size: 22rpx;
        color: #999;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}

.warning-list {
  .warning-item {
    display: flex;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .warning-dot {
      color: #fa8c16;
      margin-right: 10rpx;
      flex-shrink: 0;
    }
    
    .warning-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.forbidden-list {
  .forbidden-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .forbidden-icon {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      font-size: 32rpx;
      flex-shrink: 0;
    }
    
    .forbidden-info {
      flex: 1;
      
      .forbidden-name {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 6rpx;
        display: block;
      }
      
      .forbidden-reason {
        font-size: 24rpx;
        color: #999;
        line-height: 1.4;
      }
    }
  }
}

.recipe-list {
  .recipe-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .recipe-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 16rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    
    .recipe-info {
      flex: 1;
      
      .recipe-name {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 6rpx;
        display: block;
      }
      
      .recipe-desc {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      
      .recipe-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        
        .recipe-tag {
          font-size: 20rpx;
          padding: 2rpx 12rpx;
          background-color: #fff7e6;
          color: #fa8c16;
          border-radius: 6rpx;
        }
      }
    }
    
    .recipe-arrow {
      color: #ccc;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .popup-content {
    width: 90%;
    max-width: 600rpx;
    max-height: 90vh;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        flex: 1;
        text-align: center;
      }
      
      .popup-close {
        font-size: 40rpx;
        color: #999;
        width: 60rpx;
        text-align: right;
      }
    }
    
    .popup-body {
      padding: 30rpx;
      overflow-y: auto;
      flex: 1;
      
      .recipe-detail-image {
        width: 100%;
        height: 320rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
      }
      
      .recipe-detail-header {
        margin-bottom: 20rpx;
        
        .recipe-detail-name {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .recipe-detail-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10rpx;
          
          .recipe-tag {
            font-size: 22rpx;
            padding: 4rpx 16rpx;
            background-color: #fff7e6;
            color: #fa8c16;
            border-radius: 6rpx;
          }
        }
      }
      
      .recipe-detail-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #f0f0f0;
      }
      
      .recipe-detail-section {
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-title {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .ingredients-list {
          display: flex;
          flex-wrap: wrap;
          
          .ingredient-item {
            width: 50%;
            margin-bottom: 10rpx;
            display: flex;
            
            .ingredient-name {
              font-size: 26rpx;
              color: #333;
              flex: 1;
            }
            
            .ingredient-amount {
              font-size: 26rpx;
              color: #999;
              margin-left: 10rpx;
            }
          }
        }
        
        .steps-list {
          .step-item {
            display: flex;
            margin-bottom: 16rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .step-number {
              width: 40rpx;
              height: 40rpx;
              background-color: #fa8c16;
              color: #fff;
              font-size: 24rpx;
              border-radius: 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 16rpx;
              flex-shrink: 0;
            }
            
            .step-desc {
              font-size: 26rpx;
              color: #666;
              line-height: 1.5;
              flex: 1;
            }
          }
        }
        
        .nutrition-text, .age-text {
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}
</style> 